<!-- <!DOCTYPE>声明：是指示web浏览器关于页面使用哪个HTML版本进行编写的指令 -->
<!-- <!DOCTYPE>声明：不是HTML标签。HTML5不基于SGML，所以不需要引用DTD -->
<!DOCTYPE html>
<!-- <html>与</html>标签：限定了文档的开始点和结束点 -->
<html lang="zh">
<!-- head标签：定义文档的头部 -->
<head>
    <!-- meta标签：描述性标签，描述网站的一些信息 -->
    <meta charset="UTF-8"/>
    <!-- title标签：网页标题 -->
    <title>订单管理系统</title>
    <!-- meta标签：一般用来做SEO（搜索引擎优化） -->
    <meta name="keywords" content="道璞,订单,订单管理,订单管理系统"/>
    <meta name="description" content="道璞订单管理系统"/>
    <link rel="shortcut icon" type="image/x-icon" href="../image/notebook2.svg"/>
    <link rel="stylesheet" href="../css/style.css">
</head>
<!-- body标签：定义文档的主体 -->
<body onload="init()">
<!-- 布局标签（结构化语义标签） -->
<!-- header标签：定义文档的页眉（介绍信息） -->
<header></header>
<!-- nav标签：定义导航链接的部分 -->
<nav></nav>
<!-- aside标签：可用作文章的侧栏 -->
<aside></aside>
<!-- main标签：规定文档的主要内容。一个网页只能有一个main标签 -->
<!-- main标签：是网页的特异性部分，不应该包含网页中复用的部分 -->
<main>
    <div class="mainbox">
        <div class="Inputorderbox">
            <div id="title">
                余料清单
            </div>
            <table id="exportOddmentTable">
                <tr>
                    <td>
                        <button class="button-login" onclick="window.location.href='enterOddment.html'">输入余料</button>
                    </td>
                    <td>
                        <button class="button-login" onclick="window.open('../order/exportOddment')">导出余料</button>
                    </td>
                </tr>
            </table>
            <div align="left">
                <font color="red" size="3">
                    余料被分配后自动移除，不需要手动删除！
                </font>
            </div>
            <table id="oddment_table" name="outOrder" border="1">
                <tr>
                    <td>颜色</td>
                    <td>衣杆长度（㎜）</td>
                    <td>杆号</td>
                    <td>删除</td>
                </tr>
            </table>
        </div>
    </div>
</main>
<!-- footer标签：定义文档或节的页脚 -->
<footer></footer>
</body>
<script>
    const oddmentTable = document.getElementById("oddment_table");
    function init() {
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open("GET", "/order/getOddment");
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    cleanTableRows();
                    for (let i = 0; i < xhr.response.data.length; i++) {
                        addTr(xhr.response.data[i]);
                    }
                }
            }
        }
    }
    function addTr(oddment) {
        const row = oddmentTable.insertRow();
        row.id = oddment.id;
        row.insertCell().innerHTML = oddment.color;
        row.insertCell().innerHTML = oddment.clothesRodLength;
        row.insertCell().innerHTML = oddment.poleNumber;
        row.insertCell().innerHTML = "<button onclick='deleteOddment(this)'>删除</button>";
    }
    function deleteOddment(deletebtn) {
        const tr = deletebtn.parentNode.parentNode;
        if (confirm("确认删除 " + tr.cells[2].innerHTML + " ?")) {
            const xhr = new XMLHttpRequest();
            xhr.open("DELETE", "/order/deleteOddment?id=" + tr.id);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        alert("删除成功！");
                        window.location.replace('oddment.html');
                    } else {
                        alert("删除失败。");
                    }
                }
            }
        }
    }
    function cleanTableRows() {
        const rows = oddmentTable.rows;
        for (let i = rows.length; i > 1; i--) {
            rows[i - 1].remove();
        }
    }
</script>
</html>